<template>
  <view>
    <checkbox-group @change="checkboxChange">
      <view class="modelClass">
        <view v-for="item in state.rows" :key="item.id" class="bigBox">
          <view class="checkClassbox">
            <checkbox :value="item.id" :checked="item.checked" />
          </view>
          <view class="wrapBox">
            <view class="smallBox">
              <text class="maxwidth"> 危废行业俗称:{{ item.wfTypeName }} </text>
              <text> 容器/包装类型:{{ item.wfContainerType }} </text>
            </view>
            <view class="smallBox">
              <text> 产出日期:{{ item.create_Time }} </text>
              <text> 登记人:{{ item.registrant }} </text>
            </view>
            <view class="smallBox">
              <!-- <text> 名称:{{ item.wfName }} </text> -->
              <text> 去向:{{ item.wfTo }} </text>
            </view>
            <!-- <view class="smallBox">
              <text> 单位:{{ item.wfUnit }} </text>
              <text> 产出量:{{ item.wfWeight }} </text>
            </view> -->
            <!-- <view class="smallBox">
              <text> 废物类别:{{ item.wfTypeCode }} </text>
              <text> 危废代码:{{ item.wfCreateCode }} </text>
            </view> -->
          </view>
        </view>
      </view>
    </checkbox-group>
    <view v-if="!state.rows.length" class="loadingClass"> 暂无数据 </view>
    <view class="box">
      <button
        type="primary"
        class="btn"
        style="color: white; margin-right: 20rpx"
        @click="handleAllSelect"
      >
        全选
      </button>
      <button
        type="primary"
        class="btn"
        style="color: white; margin-right: 20rpx; width: 25%"
        @click="handleCancelAll"
      >
        取消全选
      </button>
      <button
        type="primary"
        class="btn"
        style="color: white; margin-right: 20rpx"
        @click="handleSave"
      >
        保存
      </button>
      <button class="btn" style="background: white" @click="handleCancel">
        取消
      </button>
    </view>
  </view>
</template>

<script setup>
import { select_by_dept_id, wfTypeFindPage, select_user_by_ids } from "./index";
import { useMemberStore } from "@/stores/modules/member";
import { parseTime } from "@/utils";
const memberStore = useMemberStore();
const deprops = defineProps(["wftype", "applyDeptId", "from"]);
const state = reactive({
  columns: [
    { name: "wfTypeName", title: "类型", fixed: true },
    { name: "wfName", title: "名称" },
    { name: "wfWeight", title: "产出量" },
    { name: "wfUnit", title: "单位" },
    { name: "create_Time", title: "产出日期" },
    { name: "wfContainerType", title: "容器/包装类型" },
    { name: "wfTypeCode", title: "废物类别" },
    { name: "wfCreateCode", title: "危废代码" },
    { name: "wfTo", title: "去向" },
  ],
  rows: [],
});
//点击复选框选中的数据
const seleteDatas = ref([]);
onShow(async () => {
  const typeProLists = deprops.wftype.split(",");
  for (const wftype of typeProLists) {
    const res = await select_by_dept_id({
      wftype: +wftype,
      status: 1,
      deptId: +deprops.applyDeptId,
    });
    state.rows = [...state.rows, ...JSON.parse(JSON.stringify(res.data))];
  }
  const ress = await wfTypeFindPage();
  const createUserIds = state.rows.map((item) => item.createUserId);
  const idsStr1 = [...new Set(createUserIds)].join(",");
  console.log(createUserIds, idsStr1, 745630);
  const resids = await select_user_by_ids(idsStr1);
  state.rows.forEach((item) => {
    item.create_Time = parseTime(item.produceTime, "{y}-{m}-{d}");
    const obj1 = resids.data.find((list) => list.userId == item.createUserId);
    if (obj1) {
      item.registrant = obj1.username;
    }
    //获取危废行业俗称
    if (item.wfType) {
      const typeLists = item.wfType.split(",");
      const TypeNames = [];
      typeLists.forEach((wfType) => {
        const obj1 = ress.data.find((item) => item.id == wfType);
        if (obj1) {
          TypeNames.push(obj1.wfTypeName);
        }
      });
      item.wfTypeName = TypeNames.join(",");
    }
    //获取危废行业俗称
    item.checked = false;
  });
  state.rows.sort((a, b) => b.produceTime - a.produceTime);
  if (deprops.from == "ApplicationDetails") {
    memberStore.stateTable.rows.forEach((item) => {
      const obj = state.rows.find((list) => list.id == item.id);
      if (!obj) {
        state.rows.push(item);
      }
    });
    seleteDatas.value = memberStore.stateTable.rows;
    seleteDatas.value.forEach((item) => {
      const obj = state.rows.find((list) => list.id == item.id);
      if (obj) {
        obj.checked = true;
      } else {
        obj.checked = false;
      }
    });
  } else {
    memberStore.stateTable.rows.forEach((item) => {
      const obj = state.rows.find((list) => list.id == item.id);
      if (obj) {
        obj.checked = true;
        seleteDatas.value.push(obj);
      }
    });
  }
});

const handleSave = () => {
  if (seleteDatas.value.length == 0) {
    return uni.showToast({
      icon: "none",
      title: "请勾选列表数据",
    });
  } else {
    memberStore.stateTable.rows = seleteDatas.value;
    if (deprops.from == "ApplicationDetails") {
      memberStore.ApplyViewing.wfIds = memberStore.stateTable.rows
        .map((item) => item.id)
        .join();
      memberStore.ApplyViewing.wfUnit = memberStore.stateTable.rows[0].wfUnit;
      // memberStore.ApplyViewing.wfTransWeight = memberStore.stateTable.rows.reduce((pre, next) => {
      //   return pre + next.wfWeight;
      // }, 0);
    }
    uni.navigateBack({
      delta: 1,
    });
  }
};
const checkboxChange = (e) => {
  const values = e.detail.value;
  state.rows.forEach((item) => {
    if (values.includes(item.id)) {
      item.checked = true;
      const obj = seleteDatas.value.find((list) => list.id == item.id);
      if (!obj) {
        seleteDatas.value.push(item);
      }
    } else {
      item.checked = false;
      seleteDatas.value = seleteDatas.value.filter(
        (list) => list.id !== item.id
      );
    }
  });
  console.log(state.rows, 1234566);
};

const handleCancel = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const handleAllSelect = () => {
  seleteDatas.value = state.rows;
  seleteDatas.value.forEach((item) => {
    item.checked = true;
  });
  console.log(seleteDatas.value, 6666);
};
const handleCancelAll = () => {
  state.rows.forEach((item) => {
    item.checked = false;
  });
  seleteDatas.value = [];
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  .btn {
    width: 20%;
    background-color: rgb(0, 122, 255);
    border-radius: 10rpx;
  }
}

.modelClass {
  max-height: 78vh;
  overflow-y: auto;
  .wrapBox {
    padding: 10px;
    background: #eee;
    border-radius: 20rpx;
    width: 85vw;
    margin-bottom: 20rpx;
  }
  .smallBox {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    font-size: 30rpx;
  }
  .bigBox {
    display: flex;
    justify-content: space-evenly;
  }
  .checkClassbox {
    display: flex;
    align-items: center;
  }
}
</style>